<template>
   <div class="bottom">
        <div class="bot-header">案例集</div>
        <div class="list">
            <div 
            v-for="item of this.list"
            :key="item.id"
            class="list-item">
                <div class="img-box"><img :src="item.img_url.url" alt=""></div>
                <div class="bg">
                    <h1 class="item-title">{{item.first_title}}</h1>
                    <p class="item-second">{{item.second_title}}</p>
                    <div class="line"></div>
                </div>
                
            </div>
            
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'bottom',
  data () {
    return {
  
     
    }
  },
  props:{
      list:Array
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
   
    
  },
  methods: {
   
  },
}
</script>

<style lang="stylus" scoped>
@import "~@styles/varibles.styl"
@import "~@styles/mixins.styl"
img 
    width 100%
    display block
.bot-header
    margin-top 0.2rem
    background white
    font-size 0.32rem 
    color #333333
    padding 0.24rem 0
    text-indent 0.4rem
    position relative
.bot-header::before
    position absolute
    content ""
    width 0.02rem
    height 0.32rem 
    background #00a6ba
    left 0.2rem
.list 
    margin 0.2rem
    overflow hidden
    padding-bottom 2rem

.list-item 
    padding 0 0.1rem
    width 50%
    float left
    margin-bottom 0.2rem
    
.img-box
    width 100%
    height 2.4rem
    overflow hidden
    background red
.bg 
    background white
    overflow hidden
.item-title
    font-size 0.24rem
    font-weight bold
    margin 0.05rem
    margin-bottom 0.1rem
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
.item-second 
    margin 0.05rem
    font-size 0.2rem 
    color #666666
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-height 0.26rem
    flex-direction: column;
.line 
    height 0.2rem
</style>
